<template>
  <div
      v-loading="loading"
      element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.6)">
    <boss-header :bossname="bossname"></boss-header>
    <el-row style="padding:10px 20px;">
      <el-col :span="24">
        <el-tooltip effect="dark" content="添加图库" placement="top"><el-button class="icon_button" type="primary" icon="el-icon-plus" circle plain @click="add"/></el-tooltip>
        <el-tooltip effect="dark" content="刷新图库" placement="top"><el-button class="icon_button" type="primary" icon="el-icon-refresh" circle plain @click="reload"/></el-tooltip>
      </el-col>
    </el-row>
    <el-row v-if="photoList.length === 0">
      <el-col :span="24" class="center">
        <el-alert title="此用户图库为空，请添加图库数据" center type="warning" show-icon :closable="false"> </el-alert>
      </el-col>
    </el-row>
    <el-row
      style="padding:10px;">
      <el-col :span="6" v-for="(item,index) in photoList" :key="index" style="margin-top:20px">
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <!-- <img
              :src="item.imgUrl"
              class="image"
              style="width:100%;height:200px;over-flow:hidden;"
            /> -->
            <van-image
              width="100%"
              height="200"
              fit="cover"
              :src="item.imgUrl"
            />
            <div style="padding: 14px;">
              <span>{{item.goods_name}}</span>
              <div class="bottom clearfix">
                <time class="time">{{item.add_time | timeFilter}}</time>
                <!-- <el-button type="text" class="button" @click="toWall(item.goods_id)">查看图库</el-button> -->
              </div>
            </div>
            <div class="content_bar">
              <div class="icon">
                <el-tooltip effect="dark" content="查看图库内容" placement="left"><el-button type="primary" icon="el-icon-view" circle plain @click="edit(item.goods_id,bossname)"/></el-tooltip>
              </div>
              <div class="icon">
                <el-tooltip effect="dark" content="删除图库" placement="left"><el-button type="danger" icon="el-icon-delete" circle plain @click="del(item.goods_id)"/></el-tooltip>
              </div>
            </div>
          </el-card>

      </el-col>
    </el-row>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="60%"
      >
      <el-form :model="changeData" label-width="130px" ref="formRef">
        <el-form-item label="客户名称：">
          <el-input v-model="bossname" autocomplete="off" disabled=""></el-input>
        </el-form-item>
        <el-form-item label="图库名称：">
          <el-input v-model="changeData.goods_name" >
            <template slot="prepend">{{bossname + '\-'}}</template>
          </el-input>
        </el-form-item>
        <el-form-item label="上传图片：">
          <el-upload
            ref="upload"
            :headers="uploadHeaders"
            :action="uploadUrl"
            list-type="picture-card"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="uploadSuccess"
            multiple>
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="setPreviewDialog">
            <img width="100%" :src="previewPath" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sumit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import bossHeader from './component/header'
import _ from 'lodash'
export default {
  components: {
    bossHeader
  },
  data() {
    return {
      // 上传图片数据
      dialogImageUrl: '',
      // 上传图片的Url地址
      uploadUrl: '',
      // 文件上传的请求头
      uploadHeaders: { authorization: window.sessionStorage.getItem('token') },
      // 阅览图片的完整路径值
      previewPath: '',
      // 图片阅览框的显示
      setPreviewDialog: false,
      // 弹出框
      dialogVisible: false,
      // 当前状态
      status: 'add',
      // 弹出框的标题
      dialogTitle: '新增图库',
      // 获取客户相关图库
      loading: false,
      bossname: '',
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 100
      },
      // 照片列表数据
      goodsList: [],
      // 获取后的数据
      photoList: [],

      // 照片的总数
      total: 0,
      // 表单数据
      changeData: {
        goods_name: '',
        goods_price: 1000,
        goods_number: 60,
        goods_cat: '1484,1485,1501',
        pics: []
      }
    }
  },
  filters: {
    timeFilter(value) {
      var date = new Date(value)
      var YY = date.getFullYear()
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      // console.log(YY + '年' + MM + '月' + DD + '日')
      return YY + '年' + MM + '月' + DD + '日'
    }
  },
  mounted() {
    this.uploadUrl = `${this.$ip}:8889/api/private/v1/upload`
    var urlData = this.$route.query
    this.bossname = urlData.bossListusername
    this.getGoodsList()
  },
  methods: {
    // 处理移除图片的操作
    // file 移除的图片的信息
    handleRemove(file) {
      const index = this.changeData.pics.findIndex(x => x.pic === file.response.data.tmp_path)
      // 从pics数组中获取对应的图片的索引值
      this.changeData.pics.splice(index, 1)
    },
    // 处理图片的预览效果
    handlePreview(file) {
      // console.log(file, '=====‰处理后的照片')
      this.setPreviewDialog = true
      this.previewPath = file.response.data.url
    },
    // 图片上传成功后的处理函数
    // response 上传成功后返回的数据
    uploadSuccess(response) {
      // console.log(response, '====成功后返回的数据')
      const picPath = { pic: response.data.tmp_path }
      this.changeData.pics.push(picPath)
      // console.log(this.changeData.pics, '图片数据')
    },
    // 新增图库
    add() {
      // this.$refs.formRef.resetFields()
      this.changeData = {
        goods_name: '',
        goods_price: 1000,
        goods_number: 60,
        goods_cat: '1484,1485,1501',
        pics: []
      }
      this.dialogImageUrl = ''
      this.previewPath = ''
      this.dialogVisible = true
      this.status = 'add'
      this.dialogTitle = '新增图库'
    },
    // 编辑图库
    async edit(id) {
      // console.log(name, '=====name')
      // console.log(id, '=====dsada')
      // this.dialogVisible = true
      // this.status = 'edit'
      this.dialogTitle = '编辑图库'
      await this.$http.get(`goods/${id}`).then(res => {
        console.log(res)
        if (res.data.meta.status !== 200) {
          return this.$message.error('数据获取失败')
        }
        // this.changeData = data.data
        const bossid = res.data.data.goods_id
        // const bossname = res.data.goods_name
        // console.log(this.bossname)
        this.$router.push(`/worker/showbossphoto?id=${bossid}&bossname=${this.bossname}`)
      })
      // console.log(data, '=======editData')
    },
    // 删除图库
    async del(id) {
      const result = await this.$confirm('您确认要删除该图库？', '提示', {
        type: 'error',
        cancelButtonText: '取消',
        confirmButtonText: '确认'
      }).catch(err => err)
      if (result === 'cancel') return this.$message.info('取消删除此图库')
      const { data } = await this.$http.delete(`goods/${id}`)
      if (data.meta.status !== 200) return this.$message.error(data.meta.msg)
      this.getGoodsList()
      this.$message.success('删除成功')
    },
    // 提交新增表单
    async sumit() {
      if (this.status === 'add') {
        // console.log(this.changeData, '======changeData')
        this.changeData.goods_name = this.bossname + '-' + this.changeData.goods_name
        // console.log(this.changeData.goods_name, '====最新的新增名字')
        const form = _.cloneDeep(this.changeData)
        // console.log(form, '========form')
        const { data } = await this.$http.post(`goods`, form)
        // console.log(data, '====新增返回数据')
        if (data.meta.status !== 201) {
          this.$message.error('添加图库失败')
          return false
        }
        this.$refs.upload.clearFiles()
        this.$message.success('添加图库成功')
        this.changeData = {
          goods_name: '',
          goods_price: 1000,
          goods_number: 60,
          goods_cat: '1484,1485,1501',
          pics: []
        }
        this.dialogVisible = false
        this.getGoodsList()
      }
      // this.dialogVisible = false
      // this.getGoodsList()
    },
    // 获取图片列表数据
    async getGoodsList(page = this.queryInfo.pagenum) {
      this.loading = true
      this.queryInfo.query = this.bossname
      this.queryInfo.pagenum = page
      // debugger
      const { data } = await this.$http.get(`goods`, { params: this.queryInfo })
      if (data.meta.status !== 200) return this.$message.error('获取照片列表失败')
      this.goodsList = data.data.goods
      if (data.data.total === 0) {
        this.$message.warning('此客户下没有图库，请新增')
        this.loading = false
        return false
      }
      // console.log(this.goodsList, '=====获取到的照片列表')
      // 查看对应照片库的对应图片的第一张作为首页显示
      // debugger
      // var num
      for (var i in this.goodsList) {
        const { data } = await this.$http.get(`goods/${this.goodsList[i].goods_id}`)
        // console.log(data, '=====图片data')
        // console.log(this.goodsList[i], '====data')
        if (data.data.pics.length === 0) {
          this.goodsList[i].imgUrl = '#'
        } else {
          this.goodsList[i].imgUrl = data.data.pics[0].pics_big_url
        }
      }
      // debugger
      // console.log(this.goodsList[0].imgUrl, '啦啦啦')
      this.photoList = this.goodsList
      // console.log(this.photoList, '最终数据')
      this.loading = false
    },
    // 刷新页面
    reload() {
      this.getGoodsList()
    }
  }
}
</script>
<style lang="less" scoped>
.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.el-card {
  position: relative;
  border-radius: 20px;
  margin-right:20px;
  .time {
    font-size: 13px;
    color: #999;
  }
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }
  .button {
    padding: 0;
    float: right;
  }
  .image {
    width: 100%;
    display: block;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }
  .clearfix:after {
    clear: both;
  }
  .content_bar{
    position: absolute;
    top:3%;
    right: 0.1%;
    width:50px;
    height: 48px;
    z-index: 100;
    overflow: hidden;
    .icon{
      width:100%;
      margin-bottom: 10px;
    }
  }
  .content_bar:hover{
    height: 120px;
    transition: All 0.7s ease-in-out;
    -webkit-transition: All 0.7s ease-in-out;
    -moz-transition: All 0.7s ease-in-out;
    -o-transition: All 0.7s ease-in-out;
  }
}
/deep/.el-card:hover{
  transform: translateY(-5px);
  box-shadow: 4px 4px 15px  rgb(211, 210, 210) !important;
  transition: 0.5s;
}
.icon_button{
  transition: All 0.4s ease-in-out;
  -webkit-transition: All 0.4s ease-in-out;
  -moz-transition: All 0.4s ease-in-out;
  -o-transition: All 0.4s ease-in-out;

}
.icon_button:hover{
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);

}
/deep/.image-slot{
  width: 100%;
  height: 200px;
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #e9e9e9;
  color:#999;
}
</style>
